<template>
    <li @click="model.event">

        <i :class="model.icon" style="float: left;line-height: 40px;"/>
        <span style="float: left;margin-left: 10px">
                                {{ model.menuName }}
                        </span>
        <span style="float: right;">{{ model.postfix }}</span>

<!--        <ul class="contextmenu">-->
<!--            <TableContextMenuChild-->
<!--                    v-for="(item, index) in model.childTree"-->
<!--                    :model="item"-->
<!--                    :key="index">-->

<!--            </TableContextMenuChild>-->
<!--        </ul>-->
    </li>
</template>

<script>
    import {ref} from 'vue'
    import _ from "lodash";

    export default {
        name: "TableContextMenuChild",
        props: {
            model: {
                type: Object,
                default: () => ({})
            }
        },
        setup(props) {

            let open = ref(true)
            const f1 = !_.isEmpty(props.model.childTree)
            const f = ref(f1)

            // 切换列表显示隐藏的方法
            function toggle() {
                console.log(f.value)
                if (f.value) {
                    open.value = !open.value
                }
            }

            return {
                //data
                open,
                //function
                f,
                toggle
            }
        }
    }
</script>

<style lang="less" scoped>
    .contextmenu {
        margin-left: 200px;
        width: 200px;
        background: #fff;
        z-index: 3000;
        position: absolute;
        list-style-type: none;
        padding: 2px 0;
        border-radius: 4px;
        font-size: 12px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
        li {
            line-height: 40px;
            height: 40px;
            padding: 0px 15px;
            overflow: hidden;
            border-bottom: 1px solid #EBEEF5;
            border-radius: 4px;
            &:hover {
                background: #131432;
                color: #DCDFE6;
            }
        }
    }
</style>